<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-emoji"></i> 用户管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-form ref="form" label-width="130px" :inline="true">
                    <el-form-item label="用户编号或名称">
                        <el-input v-model="query.FilterPara" placeholder="用户编号或名称" class="handle-input mr10"></el-input>
                    </el-form-item>

                    <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                    <el-button type="primary" icon="el-icon-plus" @click="handleCreate">新建</el-button>
                    <!-- <el-button type="primary" icon="el-icon-folder-add" @click="getFile">上传</el-button> -->
                    <input
                        id="app"
                        ref="uploadExcel"
                        type="file"
                        @change="importfxx(this)"
                        style="display: none;"
                        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                    />
                </el-form>
            </div>
            <el-table :data="tableData" border class="table" header-cell-class-name="table-header" v-loading="listLoading">
                <el-table-column prop="FUserID" label="用户id" v-if="show"></el-table-column>
                <el-table-column prop="FUserNo" label="用户编号"></el-table-column>
                <el-table-column prop="FBaiShengUserNo" label="百盛用户编号"></el-table-column>
                <el-table-column prop="FUserName" label="用户名称"></el-table-column>
                <el-table-column prop="FUserType" label="用户类型"></el-table-column>
                <el-table-column prop="FRelAreaNo" label="关联区域编号"></el-table-column>
                <el-table-column prop="FRelAreaName" label="关联区域名称"></el-table-column>
                <el-table-column prop="FRelShopNo" label="关联门店编号"></el-table-column>
                <el-table-column prop="FRelShopName" label="关联门店名称"></el-table-column>
                <el-table-column prop="FCounterNo" label="关联柜台编号"></el-table-column>
                <el-table-column prop="FCounterName" label="关联柜台名称"></el-table-column>
                <el-table-column prop="FCanLogin" label="是否允许登录"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.FPageIndex"
                    :page-size="query.FPageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="修改用户名称" :visible.sync="editVisible" width="40%" @close="editCloseDialog">
            <el-form ref="editForm" :model="editForm" label-width="80px">
                <el-form-item label="用户id" prop="FUserID" v-if="show">
                    <el-input v-model="editForm.FUserID" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="用户编号" prop="FUserNo">
                    <el-input v-model="editForm.FUserNo" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="用户名称" prop="FUserName">
                    <el-input v-model="editForm.FUserName"></el-input>
                </el-form-item>
                <el-form-item label="百盛编号" prop="FBaiShengUserNo">
                    <el-input v-model="editForm.FBaiShengUserNo" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="用户类型" prop="FUserType">
                    <el-radio-group v-model="editForm.FUserType" @change="rdChange1">
                        <el-radio style="margin-left:20px;" label="管理员">管理员</el-radio>
                        <el-radio label="督导">督导</el-radio>
                        <el-radio label="门店用户">门店用户</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="区域" :style="editChangeStyle" prop="FMMShopArea">
                    <el-select
                        v-model="editArea"
                        filterable
                        placeholder="请选择"
                        :disabled="editDisPlay"
                        @change="currStationChange1"
                        style="width:100%"
                    >
                        <el-option v-for="item in editAreaValue" :key="item.FRelAreaNo" :label="item.FRelAreaName" :value="item.FRelAreaNo">
                            <span style="float: left">{{ item.FRelAreaName }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.FRelAreaNo }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="门店" :style="editChangeStyle1" prop="FMTShop">
                    <el-select
                        v-model="editShop"
                        filterable
                        placeholder="请选择"
                        :disabled="editDisPlay"
                        @change="currStationChange2"
                        style="width:100%"
                    >
                        <el-option v-for="item in editShopValue" :key="item.FRelShopNo" :label="item.FRelShopName" :value="item.FRelShopNo">
                            <span style="float: left">{{ item.FRelShopName }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.FRelShopNo }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="柜台" :style="editChangeStyle1" prop="FCounter">
                    <el-select
                        v-model="editCounter"
                        filterable
                        placeholder="请选择"
                        :disabled="editDisPlay"
                        @change="currStationChange3"
                        style="width:100%"
                    >
                        <el-option
                            v-for="item in editCounterValue"
                            :key="item.FCounterNo"
                            :label="item.FCounterName"
                            :value="item.FCounterNo"
                        >
                            <span style="float: left">{{ item.FCounterName }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.FCounterNo }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否允许登录" prop="FCanLogin" label-width="100px">
                    <el-radio-group v-model="editForm.FCanLogin" @change="loginChange">
                        <el-radio style="margin-left:20px;" label="允许"></el-radio>
                        <el-radio label="拒绝"></el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑弹出框 -->
        <el-dialog title="新建用户" :visible.sync="addVisible" width="30%" @close="closeDialog">
            <el-form ref="formadd" :model="formadd" label-width="80px">
                <el-form-item label="用户编号" prop="FUserNoAdd" :rules="rulesadd.FUserNoAdd">
                    <el-input v-model="formadd.FUserNoAdd"></el-input>
                </el-form-item>
                <el-form-item label="用户名称" prop="FUserNameAdd" :rules="rulesadd.FUserNameAdd">
                    <el-input v-model="formadd.FUserNameAdd"></el-input>
                </el-form-item>
                <el-form-item label="百盛编号" prop="FBaiShengUserNo" :rules="rulesadd.FBaiShengUserNo">
                    <el-input v-model="formadd.FBaiShengUserNo"></el-input>
                </el-form-item>
                <el-form-item label="用户类型" prop="userType">
                    <el-radio-group v-model="formadd.userType" @change="rdChange">
                        <el-radio style="margin-left:20px;" label="管理员">管理员</el-radio>
                        <el-radio label="督导">督导</el-radio>
                        <el-radio label="门店用户">门店用户</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="区域" :style="changeStyle">
                    <el-select
                        v-model="AreaValue"
                        filterable
                        placeholder="请选择"
                        :disabled="disPlay"
                        @change="currStationChange1"
                        style="width:100%"
                    >
                        <el-option v-for="item in editAreaValue" :key="item.FRelAreaNo" :label="item.FRelAreaName" :value="item.FRelAreaNo">
                            <span style="float: left">{{ item.FRelAreaName }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.FRelAreaNo }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="门店" :style="changeStyle1">
                    <el-select
                        ref="shop"
                        v-model="ShopValue"
                        filterable
                        placeholder="请选择"
                        :disabled="disPlay"
                        @change="currStationChange2"
                        style="width:100%"
                    >
                        <el-option v-for="item in editShopValue" :key="item.FRelShopNo" :label="item.FRelShopName" :value="item.FRelShopNo">
                            <span style="float: left">{{ item.FRelShopName }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.FRelShopNo }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="柜台" :style="changeStyle1">
                    <el-select
                        v-model="CounterValue"
                        filterable
                        placeholder="请选择"
                        :disabled="disPlay"
                        @change="currStationChange3"
                        style="width:100%"
                    >
                        <el-option
                            v-for="item in editCounterValue"
                            :key="item.FCounterNo"
                            :label="item.FCounterName"
                            :value="item.FCounterNo"
                        >
                            <span style="float: left">{{ item.FCounterName }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.FCounterNo }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否允许登录" prop="FCanLogin" label-width="100px">
                    <el-radio-group v-model="formadd.FCanLogin" @change="loginChange">
                        <el-radio style="margin-left:20px;" label="允许"></el-radio>
                        <el-radio label="拒绝"></el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveAdd">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
// import { fetchData } from '../../api/index';
import { fetchDataFromApi } from '../../api/apiService';
export default {
    name: 'basetable',
    data() {
        return {
            show: false,
            editAreaValue: [],
            editShopValue: [],
            editCounterValue: [],

            editArea: '',
            editShop: '',
            editCounter: '',

            AreaValue: '',
            ShopValue: '',
            CounterValue: '',
            guis: {
                FCounterNo: '',
                FCounterName: ''
            },
            areas: {
                FRelAreaNo: '',
                FRelAreaName: ''
            },
            shops: {
                FRelShopNo: '',
                FRelShopName: ''
            },

            query: {
                FilterPara: '',
                FPageIndex: 1,
                FPageSize: 10
            },
            tableData: [],
            editVisible: false,
            addVisible: false,
            changeStyle: 'display:none',
            changeStyle1: '',
            editChangeStyle: '',
            editChangeStyle1: '',
            pageTotal: 0,
            editForm: {
                FUserID: '',
                FUserNo: '',
                FBaiShengUserNo: '',
                FUserName: '',
                FUserType: '',
                FRelAreaNo: '',
                FRelAreaName: '',
                FRelShopNo: '',
                FRelShioName: '',
                FCounterNo: '',
                FCounterName: '',
                FCanLogin: ''
            },
            disPlay: true,
            editDisPlay: false,
            formadd: {
                FUserNoAdd: '',
                FUserNameAdd: '',
                FBaiShengUserNo: '',
                userType: '管理员',
                FMMShopArea: '',
                FMTShop: '',
                FGui: '',
                FCanLogin: '允许'
            },
            rulesadd: {
                FUserNoAdd: [{ required: true, message: '请输入用户编号', trigger: 'blur' }],
                FUserNameAdd: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
                FBaiShengUserNo: [{ required: true, message: '请输入百盛用户编号', trigger: 'blur' }]
            },
            // idx: -1,
            // id: -1,
            listLoading: false
        };
    },
    created() {
        this.getData();
        this.getShopData();
        this.getAreaData();
        this.getCounterData();
    },
    methods: {
        //监听select得变化
        currStationChange1(val) {
            this.AreaValue = val;
            this.editForm.FRelAreaNo = val;
            this.formadd.FRelAreaNo = val;

            // console.log(this.formadd.FRelAreaNo);

            var obj = {};
            obj = this.editAreaValue.find(item => {
                return item.FRelAreaNo === val;
            });
            this.editForm.FRelAreaName = obj.FRelAreaName;
            this.formadd.FRelAreaName = obj.FRelAreaName;
        },
        currStationChange2(val, event) {
            this.ShopValue = val;
            this.editForm.FRelShopNo = val;
            this.formadd.FRelShopNo = val;
            this.$refs.shop.query = '';
            this.$emit('currStationChange2', val, event);
            // console.log(this.formadd.FRelShopNo);

            var obj = {};
            obj = this.editShopValue.find(item => {
                return item.FRelShopNo === val;
            });
            this.editForm.FRelShopName = obj.FRelShopName;
            this.formadd.FRelShopName = obj.FRelShopName;
        },
        currStationChange3(val) {
            this.CounterValue = val;
            this.editForm.FCounterNo = val;
            this.formadd.FCounterNo = val;

            // console.log(this.formadd.FCounterNo);

            var obj = {};
            obj = this.editCounterValue.find(item => {
                return item.FCounterNo === val;
            });
            this.editForm.FCounterName = obj.FCounterName;
            this.formadd.FCounterName = obj.FCounterName;
        },

        //新增时角色选择
        rdChange(value) {
            // console.log(value);
            if (value == '管理员') {
                this.disPlay = true;
                this.changeStyle1 = '';
                this.changeStyle = 'display:none';
            } else if (value == '督导') {
                this.disPlay = false;
                //督导只需要区域
                this.changeStyle = '';
                this.changeStyle1 = 'display:none';
            } else if (value == '门店用户') {
                this.disPlay = false;
                this.changeStyle = 'display:none';
                this.changeStyle1 = '';
            }
        },

        //登录状态选择
        loginChange(value) {
            // console.log(value);
        },
        //修改时角色修改
        rdChange1(value) {
            console.log(value);
            if (value == '管理员') {
                this.editDisPlay = true;
                this.editChangeStyle = 'display:none';
                this.editChangeStyle1 = '';
                this.editForm.FRelAreaNo = '';
                this.editForm.FRelAreaName = '';
                this.editForm.FRelShopNo = '';
                this.editForm.FRelShopName = '';
                this.editForm.FCounterName = '';
                this.editForm.FCounterNo = '';
            } else if (value == '督导') {
                this.editDisPlay = false;
                this.editChangeStyle = 'display:inline';
                this.editChangeStyle1 = 'display:none';
                this.editForm.FRelAreaNo = '';
                this.editForm.FRelAreaName = '';
                this.editForm.FRelShopNo = '';
                this.editForm.FRelShopName = '';
                this.editForm.FCounterName = '';
                this.editForm.FCounterNo = '';
            } else if (value == '门店用户') {
                this.editDisPlay = false;
                this.editChangeStyle = 'display:none';
                this.editChangeStyle1 = '';
                this.editForm.FRelAreaNo = '';
                this.editForm.FRelAreaName = '';
                this.editForm.FRelShopNo = '';
                this.editForm.FRelShopName = '';
                this.editForm.FCounterName = '';
                this.editForm.FCounterNo = '';
            }
        },

        //获取用户数据
        getData() {
            this.listLoading = true;
            this.query.ActionCode = 'SearchUserInfo';
            this.query.Token = localStorage.getItem('ms_token');
            fetchDataFromApi(this.query).then(res => {
                // console.log(res);
                if (res != undefined && res != null && res != '') {
                    this.tableData = res.data.items;
                    this.pageTotal = res.data.total;
                }
                this.listLoading = false;
            });
        },

        //获取区域数据
        getAreaData() {
            this.listLoading = true;
            var areaQuery = {};
            areaQuery.ActionCode = 'SearchAreaDistinct';
            areaQuery.Token = localStorage.getItem('ms_token');
            areaQuery.FilterPara = '';
            areaQuery.FPageIndex = 1;
            areaQuery.FPageSize = 10000;
            fetchDataFromApi(areaQuery).then(res => {
                if (res != undefined && res != null && res != '') {
                    var array = res.data.items;
                    // console.log(JSON.stringify(res.data).data);
                    for (let i = 0; i < array.length; i++) {
                        this.areas = {
                            FRelAreaNo: array[i].FAreaNo,
                            FRelAreaName: array[i].FAreaName
                        };
                        this.editAreaValue.push(this.areas);
                    }
                    // console.log(JSON.stringify(this.editAreaValue));
                }
                this.listLoading = false;
            });
        },

        //获取所有的门店信息
        getShopData() {
            this.listLoading = true;
            var myQuery = {};
            myQuery.ActionCode = 'SearchShop';
            myQuery.Token = localStorage.getItem('ms_token');
            myQuery.FilterPara = '';
            myQuery.FPageIndex = 1;
            myQuery.FPageSize = 10000;
            fetchDataFromApi(myQuery).then(res => {
                if (res != undefined && res != null && res != '') {
                    var array = res.data.items;
                    for (let i = 0; i < array.length; i++) {
                        this.shops = {
                            FRelShopNo: array[i].FNo,
                            FRelShopName: array[i].FName
                        };
                        this.editShopValue.push(this.shops);
                    }
                    // console.log(JSON.stringify(this.editShopValue));
                }
                this.listLoading = false;
            });
        },
        //获取柜台数据
        getCounterData() {
            this.listLoading = true;
            var counterQuery = {};
            counterQuery.ActionCode = 'SearchCounter';
            counterQuery.Token = localStorage.getItem('ms_token');
            counterQuery.FilterPara = '';
            counterQuery.FPageIndex = 1;
            counterQuery.FPageSize = 10000;
            fetchDataFromApi(counterQuery).then(res => {
                if (res != undefined && res != null && res != '') {
                    var array = res.data.items;
                    for (let i = 0; i < array.length; i++) {
                        this.guis = {
                            FCounterNo: array[i].FCounterNo,
                            FCounterName: array[i].FCounterName
                        };
                        this.editCounterValue.push(this.guis);
                    }
                    // console.log(JSON.stringify(this.editCounterValue));
                }
                this.listLoading = false;
            });
        },

        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'FPageIndex', 1);
            //this.query.FPageIndex = 1;
            this.getData();
        },
        // 触发新增按钮
        handleCreate() {
            this.formadd.FUserNoAdd = '';
            this.formadd.FUserNameAdd = '';
            this.formadd.FBaiShengUserNo = '';
            this.formadd.userType = '管理员';
            this.formadd.FMMShopArea = '';
            this.formadd.FMTShop = '';
            this.formadd.FGui = '';
            this.formadd.FCanLogin = '允许';
            this.disPlay = true;
            this.addVisible = true;
        },

        //新增保存
        saveAdd() {
            if (this.formadd.userType == '门店用户') {
                this.formadd.FMTShop = this.formadd.FRelShopNo;
                this.formadd.FGui = this.formadd.FCounterNo;

                if (this.formadd.FMTShop == '') {
                    this.$message.error('请选择门店');
                    return;
                }
                if (this.formadd.FGui == '') {
                    this.$message.error('请选择柜台');
                    return;
                }
            } else if (this.formadd.userType == '督导') {
                this.formadd.FMMShopArea = this.formadd.FRelAreaNo;
                if (this.formadd.FMMShopArea == '') {
                    this.$message.error('请选择区域');
                    return;
                }
            }
            // console.log(JSON.stringify(this.formadd));

            this.$refs.formadd.validate(valid => {
                if (valid) {
                    this.formadd.ActionCode = 'AddUserInfo';
                    this.formadd.Token = localStorage.getItem('ms_token');
                    this.formadd.FUserAdd = localStorage.getItem('ms_userno');
                    this.formadd.FUserPermission = '';

                    fetchDataFromApi(this.formadd).then(res => {
                        if (res != undefined && res != null && res != '') {
                            if (res.Message == 'OK') {
                                this.$message.success(res.Info);
                                this.getData();
                            } else {
                                this.$message.error(res.Info);
                            }
                        }
                        this.addVisible = false;
                    });
                }
            });
        },
        // 删除操作
        handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', { type: 'warning' })
                .then(() => {
                    if (row != undefined && row != null && row != '') {
                        var myRowUserNo = row.FUserNo;

                        var querypars = {};
                        querypars.ActionCode = 'DeleteUserInfo';
                        querypars.Token = localStorage.getItem('ms_token');
                        querypars.FAccountNo = myRowUserNo;
                        querypars.FUserNo = myRowUserNo;

                        fetchDataFromApi(querypars).then(res => {
                            if (res != undefined && res != null && res != '') {
                                if (res.Message == 'OK') {
                                    this.$message.success(res.Info);
                                    this.getData();
                                } else {
                                    this.$message.error(res.Info);
                                }
                            }
                        });
                    }
                })
                .catch(() => {});
        },
        // 编辑操作
        handleEdit(index, row) {
            this.editForm = Object.assign({}, row);

            
        // console.log(this.editForm);

        
            // this.editForm.FUserNoEdit = row.FUserNo;
            // this.editForm.FUserNameEdit = row.FUserName;
            this.editVisible = true;
            this.editArea = row.FRelAreaName;
            this.editShop = row.FRelShopName;
            this.editCounter = row.FCounterName;
           
            // this.editForm.userType=row.FUserType;
            if (row.FUserType == '管理员') {
                this.editChangeStyle = 'display:none';
                this.editDisPlay = true;
            } else if (row.FUserType == '督导') {
                this.editChangeStyle1 = 'display:none';
            } else if (row.FUserType == '门店用户') {
                this.editChangeStyle = 'display:none';
            }
        },

        //修改保存
        saveEdit() {


            console.log(JSON.stringify(this.editForm));
            if (this.editForm.FUserType == '门店用户') {
                this.editForm.FMTShop = this.editForm.FRelShopNo;
                this.editForm.FGui = this.editForm.FCounterNo;
                if (this.editForm.FMTShop == '') {
                    this.$message.error('请选择门店');
                    return;
                }
                if (this.editForm.FGui == '') {
                    this.$message.error('请选择柜台');
                    return;
                }
            } else if (this.editForm.FUserType == '督导') {
                this.editForm.FMMShopArea = this.editForm.FRelAreaNo;
                if (this.editForm.FMMShopArea == '') {
                    this.$message.error('请选择区域');
                    return;
                }
            }

            // console.log(JSON.stringify(this.editForm));

            this.editForm.ActionCode = 'UpdateUserInfo';
            this.editForm.Token = localStorage.getItem('ms_token');
            this.editForm.FUpdateUser = localStorage.getItem('ms_userno');
            this.editForm.FUserPermission = '';

            fetchDataFromApi(this.editForm).then(res => {
                if (res != undefined && res != null && res != '') {
                    if (res.Message == 'OK') {
                        this.$message.success(res.Info);
                        this.getData();
                    } else {
                        this.$message.error(res.Info);
                    }
                }
                this.editVisible = false;
            });
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'FPageIndex', val);
            this.getData();
        },
        //触发input上传文件
        getFile() {
            this.$refs.uploadExcel.click();
        },
        //关闭时清空表单
        closeDialog() {
            this.$refs.formadd.clearValidate();
            this.formadd.FUserNoAdd = '';
            this.formadd.FUserNameAdd = '';
            this.formadd.FBaiShengUserNo = '';
            this.formadd.userType = '管理员';
            this.formadd.FMMShopArea = '';
            this.formadd.FMTShop = '';
            this.formadd.FGui = '';
            this.formadd.FCanLogin = '允许';
            this.disPlay = true;
            this.AreaValue = '';
            this.ShopValue = '';
            this.CounterValue = '';

            this.disPlay = true;
            this.changeStyle1 = '';
            this.changeStyle = 'display:none';
            this.formadd.FRelAreaNo = '';
            this.formadd.FRelAreaName = '';
            this.formadd.FRelShopNo = '';
            this.formadd.FRelShopName = '';
            this.formadd.FCounterNo = '';
            this.formadd.FCounterName = '';

            // console.log(JSON.stringify(this.formadd));
        },
        //关闭时清空表单
        editCloseDialog() {
            this.$refs.editForm.clearValidate();
            this.$refs.editForm.resetFields();
            (this.editDisPlay = false), (this.editChangeStyle1 = ''), (this.editChangeStyle = '');
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 200px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
